<template>
  <div class="root">
    <div :id="id" class="chart-box"/>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'

export default {
  name: 'PeopleChart',
  components: {},
  props: {
    id: {
      type: String,
      default: 'people-chart'
    },
    data: {
      require: true,
    },
    ownerCount: {
      require: true,
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', () => {
      this.chart.resize()
    })
    this.chart.dispose()
    this.chart = null
  },
  computed: {
    ...mapState('app', ['sidebar']),
    agesData() {
      return [
        { value: this.data.ages[1001].totalCount, name: '17岁以下' },
        { value: this.data.ages[1002].totalCount, name: '18-24岁' },
        { value: this.data.ages[1003].totalCount, name: '25-29岁' },
        { value: this.data.ages[1004].totalCount, name: '30-39岁' },
        { value: this.data.ages[1005].totalCount, name: '40-49岁' },
        { value: this.data.ages[1006].totalCount, name: '50岁以上' }
      ]
    },
    genderData() {
      return this.data.gender
    }
  },
  watch: {
    'sidebar.opened': function(val, oldVal) {
      // console.log(this)
      setTimeout(() => {
        this.chart.resize()
      }, 300)
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title: {
          text: '人员活跃数据分析',
          textStyle: {
            color: '#000000',
            fontSize: '1.1rem'
          },
          left: '5.5%',
          top: '6.5%'
        },
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '40%',
            style: {
              text: this.ownerCount,
              font: 'bold 1.5rem "Microsoft YaHei", sans-serif',
              textAlign: 'center'
            }
          }, {
            type: 'text',
            left: 'center',
            top: '48%',
            style: {
              fill: '#666666',
              text: `人员总数`,
              textAlign: 'center',
              fontSize: '1rem'
            }
          }, {
            type: 'text',
            left: 'center',
            bottom: '7%',
            style: {
              fill: '#666666',
              text: `男性:${this.genderData.manRatio} 女性:${this.genderData.womanRatio} 单位:(人)`,
              textAlign: 'center',
              fontSize: '1rem'
            }
          }
        ],
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#74C6FF' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#0284FF' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }, {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#BBB2F7' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#907FF4' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }, {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#FE8C4C' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#FBB680' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }, {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#FE614C' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#FB9580' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }, {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#FF7393' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#FFA6C0' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }, {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#85F7F9' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#00D4BF' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '15%',
          left: 'center',
          width: 300
        },
        series: [
          {
            type: 'pie',
            radius: ['35%', '50%'],
            avoidLabelOverlap: false,
            top: '-10%',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.agesData
          }
        ]
      })
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.root {
  width: 100%;
  height: 408px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 2px 4px 0px rgb(191 191 191 / 75%);

  .chart-box {
    width: 100%;
    height: 100%;
  }
}
</style>
